<template>
  <div class="container">
    <div class="hrForm">
      <div class="choice" ref="choice">
        <h2>欢迎注册千寻招聘账号</h2>
       <!-- <p @click="changeTabs(true)">我要招聘</p>   -->
      </div>
      <el-form :model="hrInfo" status-icon :rules="hrrules" ref="hrInfo" label-width="100px" class="hrruleForm">
        <el-form-item  prop="username">
          <el-input type="text" v-model="hrInfo.username" auto-complete="off" placeholder="用户名"></el-input>
        </el-form-item>

        <el-form-item  prop="password">
          <el-input type="password" v-model="hrInfo.password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>

        <el-form-item  prop="checkPass">
          <el-input type="password" v-model="hrInfo.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input v-model.number="hrInfo.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input v-model="hrInfo.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="registerBtn" @click="hrSubmit('hrInfo')">注册</el-button>
        </el-form-item>
      </el-form>
     <div class="footer-tip3" @click="toLogin">
           已有账号?直接登录
    </div>
    </div>
  </div>
</template>

<style>
@import "../assets/Animate/animate.min.css";
  html * {
    padding: 0;
    margin: 0;
  }

  * {
    box-sizing: border-box;
  }


  .container {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .container::before {
    content: '';
    position: absolute;
    filter:blur(1px);
    background-image: url(../assets/register_bg.jpg);
    background-size: 100% 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition: all 500ms linear 0s;
  }

  .container:hover::before {
    transform: matrix(1.05, 0, 0, 1.05, 3.07, 5.7)
  }

/*  .choice {
    text-align: left;
    padding-left: 100px;
  } */

  .choice p{
    display: inline-block;
    width: 173px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #5a5a5a;
  }

  .choice p:first-child {
 /*   border-right: 1px solid #ededed; */
    font-weight: 700;
    position: relative;
  }


/*表格位置样式*/
  .hrForm {
    background: #fff;
    border: 1px solid #ededed;
    width: 555px;
    min-height: 540px;
    margin: 120px auto 150px auto;
    box-shadow: 0px 5px 8px #888;
    border-radius: 8px;
    padding-top: 36px;
    position: relative;
  }
/*表格长度向左拉伸*/
  .el-form-item__content {
    margin-left: 0px !important;
  }

/*表格选框拉伸*/
 .hrruleForm {
    width: 500px;
    position: relative;
    top: 14px;
    left: -14px;
    padding: 14px 14px 14px 100px;
  }

  /*  .choose {
      width: 100%;
    } */
/*注册右下角跳转按钮样式*/
  .footer-tip3{
    position: absolute;
    bottom: 16px;
    right: 16px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.5);
  }

/* 注册按钮 宽度*/
  .registerBtn {
    width: 100%;
  }

</style>

<script>/* eslint-disable indent,quotes,space-before-function-paren,brace-style */

import fetch from '../api/fetch'

export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入手机号"))
      } else if(!/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)) {
        return callback(new Error("请输入正确的手机号"))
      } else {
        callback()
      }
    }
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入邮箱"))
      } else if(!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) {
        return callback(new Error("请输入正确的邮箱"))
      }else {
        callback()
      }
    }
    var validUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"))
      } else if (!/^\w+$/gi.test(value)) {
        callback(new Error("用户名必须由英文或者数字组成"))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"))
      } else {
        if (this.hrInfo.checkPass !== "") {
          this.$refs.hrInfo.validateField("checkPass")
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"))
      } else if (value !== this.hrInfo.password) {
        callback(new Error("两次输入密码不一致!"))
      } else {
        callback()
      }
    }
    return {
      timer: null,
      show: true,
      options: [],
      dialogShow: false,
      tipsShow: false,
      formLabelWidth: '120px',
      hrInfo: {
        password: "",
        checkPass: "",
        phone: "",
        username: "",
        email: ""
      },
      hrrules: {
        username: [{validator: validUsername, trigger: "blur"}],
        password: [{validator: validatePass, trigger: "blur"}],
        checkPass: [{validator: validatePass2, trigger: "blur"}],
        phone: [{validator: checkPhone, trigger: "blur"}],
        email: [{validator: checkEmail, trigger: "blur"}]
      }
    }
  },
  methods: {
    hrSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid && !this.tipsShow) {
          let result = {
            email: this.hrInfo.email,
            password: this.hrInfo.password,
            phone: this.hrInfo.phone,
            username: this.hrInfo.username,
            code: this.hrInfo.code,
          }
        fetch
          .userRegister(result)
          .then(res => {
            if (res.status === 200) {
              if (res.data === 0) {
                this.$message({
                  message: "注册成功",
                  type: "success"
                });
                this.$router.push({ name: "login" });
                } else {
                this.$message({
                  message: "账号已存在！",
                  type: "warning"
                  });
                }
               }
            })
            .catch(e => {
              this.$message({
                message: "注册失败",
                type: "warning"
              });
            });
    //    }

        }
      })
    },



    toLogin() {
      this.$router.push({name: "login"})
    },

    // 公司查询
    // querySearch(queryString, cb) {
    //     var options = this.options;
    //     var results = queryString ? options.filter(this.createFilter(queryString)) : options;
    //     // 调用 callback 返回建议列表的数据
    //     console.log('ressshs', results)
    //     if (results.length === 0) {
    //       this.tipsShow = true;
    //     } else {
    //       this.tipsShow = false;
    //     }
    //     cb(results);
    // },

    // createFilter(queryString) {
    //     return (option) => {
    //       return (option.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    //     };
    // },
    // 选择公司
    // handleSelect(item) {
    //   this.companyId = item.label;
    // },
    // 控制添加公司弹窗显示
    // changeClick() {
    //   this.dialogShow = true;
    // },
    // 提交公司信息
    // submitCompanyInfo() {
    //   fetch.addCompany(this.companyInfo).then(res => {
    //       if (res.data.code === 0) {
    //           this.$message({
    //             message: "添加成功",
    //             type: "success"
    //           });
    //           this.$router.push({ name: "login" });
    //           } else {
    //             this.$message({
    //               message: res.data.msg,
    //               type: "warning"
    //               });
    //         }
    //   })
    //   console.log(this.companyInfo)
    // },
    // 注册切换角色
    // changeTabs(isHr) {
    //   if (!isHr) {
    //     this.$refs.choice.firstChild.style.fontWeight = '700'
    //      this.$refs.choice.lastChild.style.fontWeight = '400'
    //   } else {
    //     this.$refs.choice.firstChild.style.fontWeight = '400'
    //     this.$refs.choice.lastChild.style.fontWeight = '700'
    //   }
    //   this.isHr = isHr;
    // },
    toIndex() {
      this.$router.push({name: 'index'})
    }
  }
}
</script>
